import { postHttp } from '../../utils/http';
import { useNavigate } from 'react-router-dom';
import { Input, Form, Button, message } from 'antd';

const { Item } = Form;

export default function index() {
    const navigate = useNavigate()

    const state = {
        layout: {
            labelCol: { span: 8 },
            wrapperCol: { span: 16 },
        },
        tailLayout: {
            wrapperCol: { offset: 8, span: 16 },
        }
    }

    async function submit(val: any) {
        postHttp('/submit', val)
            .then(({ data }) => {
                if (data.code) {
                    message.success("注册成功")
                    navigate('/login')
                }
            })
            .catch(() => {
                message.error('注册失败')
            })
    }
    return (
        <Form
            {...state.layout}
            name="control-ref"
            onFinish={(val: any) => submit(val)}>
            <Item rules={[{
                required: true
            }]} label='账号' name='username'>
                <Input placeholder='可通过手机号/邮箱/用户名注册'></Input>
            </Item>
            <Item rules={[{
                required: true
            }]} label='密码' name='password'>
                <Input placeholder='请输入密码'></Input>
            </Item>
            <Item {...state.tailLayout}>
                <Button htmlType='submit'>注册</Button>
                <Button type="link" htmlType="button" onClick={() => { navigate('/login') }}>登录</Button>
            </Item>
        </Form>
    )
}
